<template>
    <div class="demo">
        <GroupList title="游戏">
            <ul slot="test1">
                <li v-for="(item,index) in games" :key="index">{{item}}</li>
            </ul>
            <div class="title2" slot="test2">
                <span>123</span>
                <span>321</span>
            </div>
        </GroupList>

        <GroupList title="语言">
            <img slot="test1" src="./assets/logo.png" alt="">
            <template v-slot:test2>
                <div class="title2">
                    <span>guna;amo123</span>
                    <span>asdada</span>
                 </div>
            </template>
        </GroupList>

        <GroupList title="亲戚">
            <ul slot="test1">
                <li v-for="(item,index) in kins" :key="index">{{item}}</li>
            </ul>
        </GroupList>
    </div>
</template>
<script>
    import GroupList from './components/GroupList'

    export default {
        name:'App',
        components:{
            GroupList
        },
        data() {
            return {
                games:['LOL','下棋','打飞机','雷霆战机'],
                languages:['语文','数学','英语','物理'],
                kins:['祁同伟','老墨','高启强','高启盛']
            }
        },
    }
</script>
<style>
    .demo,.title2{
        display: flex;
        justify-content: space-around;
    }
    img{    
        width: 100%;
        height: 50px;
    }
</style>